<template>
  <div class="pop-box">
    <div class="pop-items hw-click-cursor" @click.stop="shearIndex(1)">
      <div
        class="item-shadow"
        :style="{
          background: store.styleInfo.themeColor ? store.styleInfo.themeColor : '#D2AD77',
        }"
      ></div>
      <i class="doorIcon">&#xe617;</i>
      <!-- <t-icon name="logo-qq"></t-icon> -->
      <span>分享到QQ</span>
    </div>
    <div class="pop-items hw-click-cursor" @click.stop="shearIndex(2)">
      <div class="item-shadow"></div>
      <i class="doorIcon">&#xe616;</i>
      <!-- <t-icon name="logo-qq"></t-icon> -->
      <span>分享到QQ空间</span>
    </div>
    <div class="pop-items hw-click-cursor" @click.stop="shearIndex(3)">
      <i class="doorIcon">&#xe615;</i>
      <!-- <t-icon name="logo-ie"></t-icon> -->
      <span>分享到微博</span>
      <div
        class="item-shadow"
        :style="{
          background: store.styleInfo.themeColor ? store.styleInfo.themeColor : '#D2AD77',
        }"
      ></div>
    </div>
    <!-- <div class="pop-items hw-click-cursor" @click.stop="shearIndex(4)">
      <t-icon name="logo-wechat"></t-icon>
      <span>分享到微信</span>
      <div
        class="item-shadow"
        :style="{
          background: store.styleInfo.themeColor?store.styleInfo.themeColor:'#D2AD77',
        }"
      ></div>
    </div> -->
  </div>
</template>

<script setup lang="ts">
// @ts-nocheck
import { useProjectStore } from '@/store';

const store = useProjectStore();
const emit = defineEmits(['shearType']);
const shearIndex = (e: number) => {
  emit('shearType', e);
};
</script>

<style lang="less" scoped>
.pop-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 4px;
}
.pop-items {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 20px;
  font-size: 13px;
  .doorIcon {
    font-size: 16px;
    color: rgba(0, 0, 0, 1);
  }
  span {
    margin-left: 6px;
  }
}
.item-shadow {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pop-items:hover {
  opacity: 1;
}
</style>
